<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<!-- 
jquery是什么？
 是一款免费且开放源代码的javascript代码库，引入了全新的DOM选择器引擎，同时提供UI库组件。(JS工具包)
 jquery.js 
 jquery.min.js  俩个文件内容一样，min.js去掉了空格和换行，文件更小，一般用于发布。
 jquery版本
 	1.11.3  兼容 IE6,7,8  (开发中最常用)
	2.1.3 不兼容IE678
	3.2.1 只支持现代浏览器 
如何使用jquery?
外联式引入即可
jquery的选择器
1.ID选择器
2.类选择器
3.包含选择器
jquery控制元素的CSS样式
 -->
<script type="text/javascript">
/* $(document).ready(function(){}); */ /*等效于window.onload=function(){}  */
$(function(){   /*等效于window.onload=function(){}  */
	console.log($("#div1").html());
	console.log($(".aa").html());//选择数组中的第一个元素的html()  html == innerHTML
	var aaArr=$(".aa");
	console.log(aaArr.length);
	var pArr = $("#div2 p");
	console.log(pArr.length);
	//find方法 
	var div2 =$("#div2");
	var myspan=	div2.find(".dd");
	//把包含aa类的元素设置为黄色背景 高度50px
	/* $(".aa").css("backgroundColor","yellow");
	$(".aa").css("height","50px"); */
	$(".aa").css({"backgroundColor":"yellow","height":"50px"});//当设置多个css属性时，参数遵循JSON格式
	
	console.log( $(".aa").css("backgroundColor"));//特别说明 方法传一个参数代表获取，传两个参数 代表设置 在jquery中是通用的
	console.log($("#thyj").html());
	$("#thyj").html("晋太元中，武陵人捕鱼为业，缘溪行，忘路之远近");
	
	$("#div2").append("<p>打工是可能打工的</p>");
	$("#div2").before("<p style='color:red;'>打工是可能打工的</p>");
	$("#div2").after("<p style='color:blue;'>打工是可能打工的</p>");
	console.log($("#div3").prev().html());
	console.log($("#myspan").parents(".sss").html());//find 相反的方法
	var brotherArr=$("#div2").siblings("div");
	console.log(brotherArr.length);
})

</script>
<style type="text/css">
#divv{
	width: 400px;
	height: 400px;
	border: 1px solid red;
}
</style>
</head>
<body>
<div id="divv">
	<div id="div1">老大</div>
	<div id="div2" class="sss">老二
		<p>曲曲折折的荷塘上面</p>
		<p>弥望是田田的叶子</p>
		<p>叶子出水很高<span id="myspan" class="dd" >像婷婷的舞女的裙</span></p>
		<p id="thyj">晋太元中</p>
	</div>
	<div id="div3" class="aa bb cc">老三</div>
	<div id="div4" class="aa">老四</div>
	<div id="div5" class="aa">老五</div>
</div>

</body>
</html>